<template>
    <div>
        <el-card class="box-card">
            <!-- 卡片头部 -->
            <template #header>
                <div class="card-header">
                    <span>挂号订单</span>
                </div>
            </template>
            <!-- 表单提供用户下拉菜单 -->
            <el-form :inline="true">
                <el-form-item label="就诊人">
                    <el-select placeholder="请输入就诊人" v-model="patientId" @change="changeUser">
                        <el-option label="请选择全部就诊人" value=""></el-option>
                        <el-option v-for="item in allUser" :key="item.id" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="订单状态">
                    <el-select placeholder="请选择订单状态" v-model="orderStatus" @change="changeOrderStatus">
                        <el-option label="请选择全部订单状态" value=""></el-option>
                        <el-option v-for="(item,index) in allOrderState" :key="index" :label="item.comment" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <!-- 表格展示订单数据 -->
            <el-table style="margin: 10px 0;" :data="allOrderArr">
                <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
                <el-table-column label="医院" prop="hosname"></el-table-column>
                <el-table-column label="科室" prop="depname"></el-table-column>
                <el-table-column label="医生" prop="title"></el-table-column>
                <el-table-column label="服务费" prop="amount"></el-table-column>
                <el-table-column label="就诊人" prop="patientName"></el-table-column>
                <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
                <el-table-column label="操作">
                    <template #="{ row }">
                        <el-button type="text" size="deafult" @click="goDetail(row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handeler2" @current-change="handler" v-model:current-page="pageNo"
                v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                layout=" prev, pager, next, jumper,->,total, sizes" :total="total" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reqUserOrderInfo, reqAllUser, reqOrderState } from '@/api/user/index'
import type { userOrderResponseData, records, AllUser, ALlUserResponseData, AllOrderStateResponseData, AllOrderState } from '@/api/user/type'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

let pageNo = ref<number>(1)
let pageSize = ref<number>(10)
let patientId = ref<string>('')
let orderStatus = ref<string>('')
let allOrderArr = ref<records>([])
let total = ref<number>(0)
let $router = useRouter()
let allUser = ref<AllUser>([])
let allOrderState = ref<AllOrderState>([])

onMounted(() => {
    getOrderInfo()
    getData()
})
const getOrderInfo = async () => {
    const result: userOrderResponseData = await reqUserOrderInfo(pageNo.value, pageSize.value, patientId.value, orderStatus.value)
    if (result.code === 200) {
        allOrderArr.value = result.data.records
        total.value = result.data.total
    }

}
const goDetail = (row: any) => {
    $router.push({ path: '/user/order', query: { orderId: row.id } })
}
const handler = (page: number) => {
    pageNo.value = page
    getOrderInfo()
}
const handeler2 = (pagesize: number) => {
    pageSize.value = pagesize
    getOrderInfo()
}
// 获取就诊人和订单的方法
const getData = async () => {
    // 获取就诊人
    const result: ALlUserResponseData = await reqAllUser()
    // 获取订单状态
    const result1: AllOrderStateResponseData = await reqOrderState()
    allUser.value = result.data
    allOrderState.value = result1.data

}
// 就诊人下拉菜单的方法
const changeUser = ()=>{
    getOrderInfo()
}
// 订单状态下拉菜单的方法
const changeOrderStatus = ()=>{
    getOrderInfo()
}
</script>

<style scoped lang="scss"></style>